import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, DatePicker, Form, Input, Modal, Row, Select, Table } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const data = [
  {
    time: '2023-11-10',
    name: '莫叶香',
    fromName: '刘显文',
    no: 'xxxxxx',
    real: '100%',
    caseType: '卖淫',
    result: '疑似余罪',
  },
  {
    time: '2023-11-10',
    name: '董邦杰',
    fromName: '刘显文',
    no: 'xxxxxx',
    real: '100%',
    caseType: '组织卖淫',
    result: '疑似余罪',
  },
  {
    time: '2023-11-29',
    name: 'xxx',
    fromName: 'xxx',
    no: 'xxxxxx',
    real: '30%',
    caseType: '危险驾驶',
    result: '疑似余罪',
  },
  {
    time: '2023-10-28',
    name: 'xxx',
    fromName: 'xxx',
    no: 'xxxxxx',
    real: '判断中',
    caseType: '盗窃',
    result: '证据挖掘',
  },
  {
    time: '2024-4-10',
    name: 'xxx',
    fromName: 'xxx',
    no: 'xxxxxx',
    real: '未能判断',
    caseType: '嫖娼',
    result: '暂无结果',
  },
];

export default () => {
  const [addModalOpen, setAddModalOpen] = useState(false);
  const navigate = useNavigate();

  const columns = [
    {
      title: '甄别时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '任务编号',
      dataIndex: 'no',
      key: 'no',
    },
    {
      title: '来源人员',
      dataIndex: 'fromName',
      key: 'fromName',
    },
    {
      title: '被检举人',
      dataIndex: 'name',
      key: 'name',
    },

    {
      title: '案件类型',
      dataIndex: 'caseType',
      key: 'caseType',
    },
    {
      title: '真实度',
      dataIndex: 'real',
      key: 'real',
      render: (_) => {
        if (_ === '未能判断') return _;
        return <div className="red">{_}</div>;
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: () => {
        return (
          <div>
            <Button
              type="primary"
              onClick={() => {
                navigate('/cases/clueResult');
              }}
            >
              详情
            </Button>
          </div>
        );
      },
    },
  ];

  return (
    <PageContainer>
      <Modal
        width={1000}
        open={addModalOpen}
        title="创建核验任务"
        okText="创建"
        cancelText="取消"
        onCancel={() => setAddModalOpen(false)}
      >
        <Form labelCol={{ span: 6 }}>
          <Card title="来源案件">
            <Row gutter={10}>
              <Col span={8}>
                <Form.Item label="来源案件">
                  <Select></Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="来源人员">
                  <Select></Select>
                </Form.Item>
              </Col>
            </Row>
          </Card>

          <Card title="来源案件" className="mt10">
            <Row gutter={10}>
              <Col span={8}>
                <Form.Item label="对象姓名">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="身高">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="年龄">
                  <Input></Input>
                </Form.Item>
              </Col>

              <Col span={8}>
                <Form.Item label="昵称">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="性别">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="职业">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="证件类型">
                  <Select></Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="证书编号">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="人员编号">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="户籍信息">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="居住地">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="联系方式">
                  <Input></Input>
                </Form.Item>
              </Col>
            </Row>
          </Card>

          <Card title="位置信息" className="mt10">
            <Row gutter={10}>
              <Col span={8}>
                <Form.Item label="线索时间">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="线索区划">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="线索地址">
                  <Input></Input>
                </Form.Item>
              </Col>
            </Row>
          </Card>

          <Card title="时间信息" className="mt10">
            <Row gutter={10}>
              <Col span={8}>
                <Form.Item label="涉罪类型">
                  <Select></Select>
                </Form.Item>
              </Col>
              <Col span={16}>
                <Form.Item label="案情描述">
                  <Input></Input>
                </Form.Item>
              </Col>
            </Row>
          </Card>

          <Card title="物件信息" className="mt10">
            <Row gutter={10}>
              <Col span={8}>
                <Form.Item label="物件类型">
                  <Select></Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="物件名称">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="物件备注">
                  <Input></Input>
                </Form.Item>
              </Col>
            </Row>
          </Card>

          <Card title="社会关系" className="mt10">
            <Row gutter={10}>
              <Col span={8}>
                <Form.Item label="对象名称">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="证件编号">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="关系类型">
                  <Select></Select>
                </Form.Item>
              </Col>
            </Row>
          </Card>
        </Form>
      </Modal>
      <div>
        <Card title="核验历史">
          <Form labelCol={{ span: 6 }}>
            <Row>
              <Col span={8}>
                <Form.Item label="核验时间">
                  <DatePicker.RangePicker></DatePicker.RangePicker>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="人员姓名">
                  <Input></Input>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              {/* <Col span={8}>
                <Form.Item label="核验结果">
                  <Select defaultValue={'1'}>
                    <Select.Option value="1">疑似余罪</Select.Option>
                  </Select>
                </Form.Item>
              </Col> */}
              <Col span={8}>
                <Form.Item label="人员编号">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="任务来源">
                  <Select defaultValue={'1'}>
                    <Select.Option value="1">手工创建</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <Form.Item label="证件号码">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={10}></Col>
              <Col span={6} className="f-end">
                <Button onClick={() => setAddModalOpen(true)}>手工创建</Button>
                <Button type="primary" className="ml10">
                  搜索
                </Button>
              </Col>
            </Row>
          </Form>

          <Table columns={columns} dataSource={data}></Table>
        </Card>
      </div>
    </PageContainer>
  );
};
